<!-- 设置公务号码所属分类 -->
<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="displayModuleTitle"
    @ok="onButtonOkClick"
    :body-style="{ height: '250px' }"
  >
    <BasicForm @register="registerForm" :labelWrap="true" />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref, computed } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';

  import { replaceWordFormSchema } from './articles.data';
  import { moveArticlesToCategory, replaceWord } from '/@/api/cms/article';

  import { useMessage } from '/@/hooks/web/useMessage';

  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { displayTitle } from '/@/utils/QcUnifyUtil';

  import { queryListSimple } from '/@/api/cms/category'; // api
  import { CategoryQueryConditionDto } from '/@/api/cms/model/categoryModel';

  const { createMessage, createInfoModal } = useMessage();

  export default defineComponent({
    name: 'ReplaceWord',
    components: { BasicModal, BasicForm },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      //接收父组件传递过来的数据对象
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      const formSchema = ref<formSchema>([]);
      const labelwidth = ref();
      /**
       * 处理显示的模块标题，用于显示在弹出框中的标题
       */
      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });

      //父组件传递过来的文章ID集合
      const dataIds = ref([]);

      const [registerForm, { resetFields, validate, updateSchema, appendSchemaByField }] = useForm({
        labelWidth: 100,
        schemas: formSchema,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      /**
       * 根据父组件传递过来的参数获取对应的操作，操作不同所对应的界面不同
       */
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        console.log(data);
        //接收父组件传递的数据
        if (data != undefined && data != null) {
          qcUnifyProps.value = unref(data);
          console.log('接收的对象', data.dataId);
          dataIds.value = data.dataId;
          formSchema.value = data.formSchema;
          // let length = 0;
          // data.formSchema.forEach((item) => {
          //   if (item.label.length > length) length = item.label.length;
          // });
          // labelwidth.value = length * 15;
        }
        resetFields(); //重置表单
        setModalProps({
          confirmLoading: false,
        });
      });

      /**
       * 点击确认按钮，保存信息
       */
      async function onButtonOkClick() {
        try {
          const values = await validate();
          setModalProps({
            confirmLoading: true,
          });
          let tmp = values;
          formSchema.value.forEach((item) => {
            if (!tmp[item.field]) {
              tmp[item.field] = '';
            }
          });
          replaceWord({
            sensitivereplacewords: tmp,
            articleids: dataIds.value,
          })
            .then((res) => {
              console.log(res, 'res');
              if (res) {
                createInfoModal({
                  title: '替换结果',
                  content: res,
                  getContainer: () => document.body,
                });
              }
              opSuccess();
            })
            .catch((ex) => {
              console.log('catch ', ex);
              createMessage.error(ex.msg);
            });
        } finally {
          setModalProps({
            confirmLoading: false,
          });
        }
      }

      //操作成功后
      function opSuccess() {
        closeModal();
        emit('success');
      }

      return {
        displayModuleTitle,
        registerModal,
        registerForm,
        onButtonOkClick,
        opSuccess,
        formSchema,
      };
    },
  });
</script>
